<template>
  <div class="mainBox">
    <div class="banner">
      <img
        src="https://assets-cdn.lanqb.com/imgv3_m/images/t-banner.png"
        alt=""
      />
    </div>
    <!-- 六个按钮 -->
    <div class="submenu">
      <div class="submenu-item">
        <img src="@/assets/schoolBanner/h-submenu20.png" alt="" />
        <p class="s-tit">直播课</p>
      </div>
      <div class="submenu-item">
        <img src="@/assets/schoolBanner/h-submenu_2205.png" alt="" />
        <p class="s-tit">录播课</p>
      </div>
      <div class="submenu-item">
        <img src="@/assets/schoolBanner/h-submenu18.png" alt="" />
        <p class="s-tit">企业荣誉</p>
      </div>
      <div class="submenu-item">
        <img src="@/assets/schoolBanner/h-submenu12.png" alt="" />
        <p class="s-tit">学员作品</p>
      </div>
      <div class="submenu-item">
        <img src="@/assets/schoolBanner/h-submenu19.png" alt="" />
        <p class="s-tit">学员成长</p>
      </div>
      <div class="submenu-item">
        <img src="@/assets/schoolBanner/h-submenu10.png" alt="" />
        <p class="s-tit">怎样学习</p>
      </div>
    </div>
    <!-- 本页面标题上面一道空白  公用 -->
    <div
      class="blank"
      style="width: 100%; height: 10px; background: #f7f7f7"
    ></div>
    <!-- 本页面每一块的标题  公用 -->
    <div class="common-tit">
      <h2>网校课程</h2>
      <p class="more">更多&gt;</p>
    </div>
    <!-- 网校课程 -->
    <div class="clearFix">
      <div class="c-box" v-for="item in res.course" :key="item.id">
        <div class="c-list">
          <img :src="`https://ss.lanqb.com/${item.posters.mobile}`" alt="" />
          <p class="c-tit">{{ item.title }}</p>
        </div>
      </div>
    </div>
    <!-- 本页面标题上面一道空白  公用 -->
    <div
      class="blank"
      style="width: 100%; height: 10px; background: #f7f7f7"
    ></div>
    <!-- 本页面每一块的标题  公用 -->
    <div class="common-tit">
      <h2>优秀师资</h2>
      <p class="more">更多&gt;</p>
    </div>
    <!-- 优秀师资 -->
    <div class="teacherBox">
      <div class="teacher-list" v-for="item in res.superior" :key="item.id">
        <div class="t-cons">
          <img :src="`https://ss.lanqb.com/${item.user.avatar}`" alt="" />
          <div class="tName">
            <p class="year">{{ item.user.nickname }}</p>
            <span><i class="iconfont icon-jingyanzhi"></i></span>
          </div>
          <p class="nums">行业经验:{{ item.seniority }}年</p>
        </div>
      </div>
    </div>
    <!-- 本页面标题上面一道空白  公用 -->
    <div
      class="blank"
      style="width: 100%; height: 10px; background: #f7f7f7"
    ></div>
    <!-- 本页面每一块的标题  公用 -->
    <div class="common-tit">
      <h2>学员感言</h2>
      <p class="more">更多&gt;</p>
    </div>
    <!-- 学员感言 -->
    <div class="stuBox">
      <div class="stu-list" v-for="item in res.thanks" :key="item.id">
        <div class="stuCon">
          <img :src="`https://ss.lanqb.com/${item.avatar}`" alt="" />
        </div>
        <div class="stuText">
          <p class="s-data">
            <b>{{ item.name }} : </b>{{ item.content }}
          </p>
        </div>
      </div>
    </div>
    <!-- 本页面标题上面一道空白  公用 -->
    <div
      class="blank"
      style="width: 100%; height: 10px; background: #f7f7f7"
    ></div>
    <!-- 本页面每一块的标题  公用 -->
    <div class="common-tit">
      <h2>学员作品</h2>
      <p class="more">更多&gt;</p>
    </div>
    <!-- 学员作品 -->
    <div class="worksBox">
      <div class="works" v-for="item in res.works" :key="item.id">
        <div class="w-imgs">
          <img :src="`https://ss.lanqb.com/${item.work_url}`" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from "vue";
const { $axios, $request } =
  getCurrentInstance().appContext.config.globalProperties;

//  https://ss.lanqb.com/o_1dggr8oho1d3q17fe67pmhg1kgq7.jpg
// 网校课程  https://m.lanqb.com/api/school/professionals?limit=4
// 优秀师资  https://m.lanqb.com/api/school/teacher?limit=3
// 学员感言  https://m.lanqb.com/api/school/testimoniales?limit=3
// 学员作品  https://m.lanqb.com/api/school/works?limit=9&sort=-top_weight

let res = reactive({
  course: [], // 网校课程
  superior: [], // 优秀师资
  thanks: [], // 学员感言
  works: [], // 学员作品
});
$axios(`/lanqb//api/school/professionals?limit=4`, "GET").then(({ data }) => {
  res.course = data.data;
  // console.log(res.course);
});
$axios(`/lanqb/api/school/teacher?limit=3`, "GET").then(({ data }) => {
  res.superior = data.data;
  // console.log(res.superior);
});
$axios(`/lanqb/api/school/testimoniales?limit=3`, "GET").then(({ data }) => {
  res.thanks = data.data;
  // console.log(res.thanks);
});
$axios(`/lanqb/api/school/works?limit=9&sort=-top_weight`, "GET").then(
  ({ data }) => {
    res.works = data.data;
    // console.log(res.works);
  }
);
</script>

<style lang="less">
.mainBox {
  width: 100vw;
  height: calc(100vh - 40px - 44px - 50px);
  overflow-y: scroll;
  box-sizing: border-box;
  &::-webkit-scrollbar {
    display: none;
  }
  .banner {
    width: 330px;
    height: 66px;
    padding: 5px 10px;
    img {
      display: block;
      padding: 0 12px;
      width: 330px;
      height: 66px;
    }
  }
  // 六个按钮
  .submenu {
    padding: 0 10px;
    margin: 15px 0;
    display: flex;
    justify-content: space-between;
    img {
      width: 43px;
      height: 43px;
    }
    .s-tit {
      color: #222222;
      font-size: 12px;
      margin: 5px 0;
      text-align: center;
    }
  }
  // 本页面每一块的标题  公用
  .common-tit {
    width: 100vw;
    height: 34px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    h2 {
      color: #222222;
      font-size: 14px;
      font-weight: 400;
    }
    .more {
      color: #a4a4a4;
      font-size: 12px;
    }
  }
  // 网校课程
  .clearFix {
    padding: 20px 10px 15px 10px;
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .c-box {
      .c-list {
        width: 171px;
        height: 133px;
        img {
          width: 100%;
          height: 95px;
          border-radius: 3px;
        }
        .c-tit {
          color: #222222;
          font-size: 12px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }
  }
  // 优秀师资
  .teacherBox {
    padding: 20px 15px 15px 15px;
    width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .teacher-list {
      .t-cons {
        img {
          width: 84px;
          height: 84px;
          border-radius: 50%;
        }
        .tName {
          display: flex;
          margin-top: 10px;
          margin: 0 auto;
          .year {
            color: #222222;
            font-size: 16px;
            text-align: center;
          }
          i {
            font-size: 15px;
            color: #edce8c;
          }
        }
        .nums {
          text-align: center;
          color: #a4a4a4;
          font-size: 12px;
        }
      }
    }
  }
  // 学员感言
  .stuBox {
    padding: 20px 10px 15px 10px;
    width: 100vw;
    box-sizing: border-box;
    .stu-list {
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid #e6e6e6;
      .stuCon {
        width: 71px;
        img {
          width: 71px;
          height: 71px;
          border-radius: 3px;
        }
      }
      .stuText {
        .s-data {
          margin-left: 8px;
          font-size: 12px;
          color: #222222;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          overflow: hidden;
          float: right;
          line-height: 1.5;
        }
      }
    }
  }
  // 学员作品
  .worksBox {
    width: 100vw;
    padding: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .works {
      .w-imgs {
        width: 115px;
        height: 86px;
        margin-top: 10px;
        img {
          width: 115px;
          height: 86px;
        }
      }
    }
  }
}
</style>
